import React from 'react';
import NavHeader from '@/components/NavHeader';
import { connect } from 'react-redux';
import { RouteComponentProps, Link } from 'react-router-dom';
import { Form, Input, Button, message } from 'antd';
import { CombinedState } from '../../store/reducers';
import { UserAddOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
import { ProfileState } from '@/store/reducers/profile';
import actions from '@/store/actions/profile';
import './style.less';

type StateProps = ReturnType<typeof mapStateToProps>;

type DispatchToProps = typeof actions;
interface Params {}

type Props = RouteComponentProps<Params> & StateProps & DispatchToProps;

function Register(props: Props) {
  const onFinish = (values: any) => {
    props.register(values);
  };

  const onFinishFailed = (errorInfo: any) => {
    message.error('表单验证失败! ' + errorInfo);
  };

  return (
    <>
      <NavHeader history={props.history}>用户注册</NavHeader>
      <Form onFinish={onFinish} onFinishFailed={onFinishFailed} className="login-form">
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input prefix={<UserAddOutlined />} placeholder="用户名" />
        </Form.Item>

        <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }]}>
          <Input prefix={<MailOutlined />} placeholder="邮箱" type="email" />
        </Form.Item>

        <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
          <Input prefix={<LockOutlined />} placeholder="密码" type="password" />
        </Form.Item>

        <Form.Item
          label="确认密码"
          name="confirmPassword"
          rules={[{ required: true, message: '请输入确认密码' }]}
        >
          <Input prefix={<LockOutlined />} placeholder="确认密码" type="password" />
        </Form.Item>

        <Form.Item className="bottom-view">
          <Button type="primary" htmlType="submit" className="login-form-button">
            注册
          </Button>
          或者<Link to="/login">立即登录！</Link>
        </Form.Item>
      </Form>
    </>
  );
}

let mapStateToProps = (state: CombinedState): ProfileState => state.profile;

export default connect(mapStateToProps, actions)(Register);
